<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 1368px;
        }
        #user-add .modal-content {
            padding: 0 20px 20px;
        }
        #user-edit .modal-content {
            padding: 0 20px 20px;
        }
        .username-error {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
<!-- 引入公共头部 -->
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="register-card">
                <h2 class="text-center mb-4 text-primary">增加用户</h2>
                <form action="${pageContext.request.contextPath}/denglu/add" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label for="name" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="invalid-feedback">请输入用户名</div>
                        <div class="username-error" id="username-error">用户名已存在</div>
                    </div>
                    <div class="mb-3">
                        <label for="pass" class="form-label">密码</label>
                        <input type="password" class="form-control" id="pass" name="pass" required>
                        <div class="invalid-feedback">请输入密码</div>
                    </div>
                    <label for="tou">头像:</label>
                    <input type="file" id="tou" name="image" accept="image/*"><br><br>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">增加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<script>
    // 表单实时验证
    (() => {
        'use strict'
        const forms = document.querySelectorAll('.needs-validation')

        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>
</body>
</html>
